<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		 <view>{{ number + 1 }}</view>
		        <view>{{  ok? 'YES': 'NO'  }}</view>
		        <view>{{ message.split('').reverse().join('') }}</view>
		
		        <!-- index 下标动则会... -->
		        <view v-for="item in arr" style="color:#FF0000">
		            {{ item }}
		        </view>
		
		        <view v-for="(item, index) in 6" style="color: #00FFFF">
		            <view :class="'list-' + index%2">{{ index + 2 }}</view>
		        </view>
		
		        <view v-for="(value, name, index) in object">
		            {{ index }}---{{ name }}---{{ value }}
		        </view>
		
		        <view v-for="item in arr" :key="item.id">
		            <view style="color:#333300">{{ item.id }}:{{ item.name }}</view>
		        </view>
	</view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                number: 1,
                message: 'Hello',
                arr: [{
                        id: 1,
                        name: 'uni-app'
                    },
                    {
                        id: 2,
                        name: 'HTML'
                    },
                    {
                        id: 3,
                        name: 'WeChat'
                    },
                    {
                        id: 4,
                        name: 'Android'
                    }
                ],
                object: {
                    title: 'How to do lists in Vue',
                    author: 'Jane Doe',
                    publishedAt: '2020-04-10'
                }
            }
        }
    }
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
